/<template>
  <div>
    <div style="margin-bottom: 16px;font-weight: 600;">模板档位消耗计算（首充模板）</div>
    <div>
      <BiTable
        :data="list"
        size="medium"
        :column="tableColums"
      ></BiTable>
    </div>
  </div>
</template>

<script>
import { consumption } from '@/utils/index'
export default {
  props: {
    rule: {
      type: Array,
      default: () => []
    },
    template: {
      type: Array,
      default: () => []
    },
    initial: {
      type: Number,
      default: 0
    },
    start: {
      type: Number,
      default: 0
    },
    total: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      tableColums: [
        {
          label: '充值档位',
          prop: 'rechargeType',
          width: 120
        },
        {
          label: '详情',
          prop: 'details'
        },
        {
          label: '预计可播放至',
          prop: 'results',
          width: 200,
          render: (h, { row }) => {
            const resultsA = row.results.split(',')[0]
            const resultsB = row.results.split(',')[1]
            if (resultsB) {
              return (
                <div>
                  {row.results.split(',')[0]}{' '}
                  <el-tag type='success' color='#E1FFF0' style='color: #06c261'>
                    {row.results.split(',')[1]}
                  </el-tag>{' '}
                </div>
              )
            } else {
              return <div>{resultsA}</div>
            }
          }
        }
      ]
    }
  },
  computed: {
    list() {
      return consumption(this.rule, this.template, this.initial, this.start, this.total)
    }
  }
}
</script>

<style>
</style>